<template>
    <div>
        <el-dialog
            title="修改地址"
            :visible.sync="AddRessDialogVisible"
            width="50%"  @close="handleClosed">
            <el-form :model="addRessForm" :rules="rules" ref="addRuleForm" label-width="100px" 
            class="demo-ruleForm">
                <el-form-item label="省市区/县" prop="address1">
                    <el-cascader :options="citydata" v-model="addRessForm.address1"></el-cascader>
                </el-form-item>
                <el-form-item label="详细地址" prop="address2">
                    <el-input v-model="addRessForm.address2"></el-input>                    
                </el-form-item>
            </el-form>
            <span slot="footer" class="dialog-footer">
                <el-button @click="AddRessDialogVisible = false">取 消</el-button>
                <el-button type="primary" @click="AddRessDialogVisible = false">确 定</el-button>
            </span>
        </el-dialog>
    </div>
</template>

<script>
import citydata from '@/util/citydata.js'
export default {
    name: 'UpdateRess',

    data() {
        return {
            addRessForm:{
                address1:[],
                address2:'',
            },
            rules:{
                address1:[
                    {required: true, message:"请选择省市区/县", trigger:'blur'}
                ],
                address2 :[
                     {required: true, message:"请填写详细地址", trigger:'blur'}
                ]
            },
            AddRessDialogVisible:false,
            citydata,
        };
    },

    mounted() {
        
    },

    methods: {
        // 关闭对话框清空
        handleClosed(){
            this.$refs.addRuleForm.resetFields()
        }
    },
};
</script>

<style lang="less" scoped>
.el-cascader{
    width: 100%;
}
</style>